<%
/**
 *  list 职工列表
 * 
 * @author  李荣华
 * @version v1.0
 * @date    2017-12-02
 * @since   JSP 2.3.1
 */
%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="at" uri="http://www.jketing.com/at"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>职工列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="no-cache" http-equiv="Pragma"/>
<meta content="no-cache" http-equiv="Cache-Control"/>
<meta content="0" http-equiv="Expires"/>
<meta name="GENERATOR" content="MSHTML 8.00.6001.18854"/>
<link rel="stylesheet" type="text/css" id="list" href="<at:url css="list.css"/>" />
<link rel="stylesheet" type="text/css" id="banner" href="<at:url css="banner_button.css"/>" />
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/map.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/query.js"></script>
<script type="text/javascript" src="<at:url js="list.js"/>"></script>
<script type="text/javascript">
	/**
	 * 跳转到添加页面
	 */
	function add(){
		var url = "${pageContext.request.contextPath}/employee?nodeId=${nodeId}&order=${order}";
		setTimeout(function(){
		    window.location.href = url;
		},0);
	}
	
	/**
	 * 点击进入编辑页面
	 */
	function enter(id) {
		var url = "${pageContext.request.contextPath}/employee/" + id + "?query=${query}&order=${order}&page=${page}";
		setTimeout(function(){
		    window.location.href = url;
		},0);
	}

	/**
	 * 选择进入编辑页面
	 */
	function edit() {
		var id = checkOneValue('checkOne');
		var url = "${pageContext.request.contextPath}/employee/" + id + "?query=${query}&order=${order}&page=${page}";
		setTimeout(function(){
		    window.location.href = url;
		},0);
	}
	
	/**
	 * 删除操作
	 */
	function del() {
		var id = checkManyValue('checkOne');
		if (id && window.confirm("你确定要删除吗？")) {
			var url = "${pageContext.request.contextPath }/employee/" + ids;
			$("#_form").attr("action", url);
			$("#_method").val("DELETE");
			$("#_form").submit();
		}
	}
	
	/**
	 * frame内部的数据列表上的查询按钮调用
	 * 
	 * @return
	 */
	function queryBar() {	
		/* var bar = document.getElementById("query_bar");
		var header = document.getElementById("dataheader");
		var list = document.getElementById("dataList");
		if (bar.style.display == "none") {
			bar.style.display = "block";
			bar.style.top="24px";
			bar.style.height="30px";
			header.style.top="54px";
			list.style.top="78px";
		} else {
			bar.style.display = "none";				
			bar.style.top="0px";
			bar.style.height="0px";				
			header.style.top="24px";
			list.style.top="48px";
		}	 */
		var bar = document.getElementById("query_bar");
		var header = document.getElementById("dataheader");
		var list = document.getElementById("dataList");
		var count = queryFormCount-1;
		if (bar.style.display == "none") {
			bar.style.display = "block";	
			bar.style.top="24px";
			setQueryFormHeight(count);
		} else {
			bar.style.display = "none";				
			bar.style.top="0px";
			bar.style.height="0px";				
			header.style.top="24px";
			list.style.top="48px";
		}
	}
	
	var queryFields = eval('(' + '${queryFields}' + ')');
	var queryFormCount = 1;

	function createButton(){
		var bar = document.getElementById("query_bar");
		var div = document.createElement('div');
		div.id = "but_div_"+queryFormCount;
		div.setAttribute('style', 'padding-top:5px;');
		div.innerText="查找";
		div.onmouseover=function(){
			this.style.cursor='hand';
		}; 
		div.onclick=function(){
			createQueryExpression();
			document.forms['queryForm'].page.value=1;
			document.queryForm.submit();
		}; 
		bar.appendChild(div);
	}
	
	function setQueryFormHeight(number){
		var rows = parseInt(number/2);
		if(number%2!=0) rows++;
		var bar = document.getElementById("query_bar");
		var header = document.getElementById("dataheader");
		var list = document.getElementById("dataList");
		var bar_height = 30*rows;
		var header_top = 24 + 30*rows;
		var list_top = 48 + 30*rows;
		bar.style.height = bar_height + "px";
		header.style.top = header_top  + "px";
		list.style.top = list_top + "px";
	}
	
	function createSeparator(separator){
		var bar = document.getElementById("query_bar");
		div = document.createElement('div');
		div.id = "separator_div_"+queryFormCount;
		if(queryFormCount<3) div.setAttribute('style', 'padding-top:3px;');
		bar.appendChild(div);
		//使用createElement创建查询组合运算选择元素
		select = document.createElement("select");
		select.id = "separator_" + queryFormCount;
		div.appendChild(select);
		var map = getSeparators();
		for ( var i=0;i<map.size();i++) {
			var key = map.getKey(i);
			select.options.add(new Option(map.get(key), key));
		}
		if(separator!=''){
			$("#separator_" + queryFormCount).find("option[value='" + separator + "']").attr("selected","selected");
		}
		select.addEventListener('change', function() {
			//var select = document.getElementById("fieldSelect");
			//var queryFormCount = select.selectedIndex; // 选中索引
			//var text = select.options[queryFormCount].text; // 选中文本
			//var value = select.options[queryFormCount].value; // 选中值
			var value = $("#"+this.id).val();				
			var array = this.id.split("_");
			var current = parseInt(array[1]);
			var next = current + 1;
			var field = document.getElementById("field_div_"+next);
			//var separator = document.getElementById("separator_div_"+num);
			var but = document.getElementById("but_div_"+next);
			if(value.indexOf("#")>-1){
				setQueryFormHeight(current);
				do{
					var field_ = document.getElementById("field_div_"+queryFormCount);
					var separator_ = document.getElementById("separator_div_"+queryFormCount);
					var but_ = document.getElementById("but_div_"+queryFormCount);
					if(field_!=null) bar.removeChild(field_);
					if(separator_!=null) bar.removeChild(separator_);
					if(but_!=null) bar.removeChild(but_);
					queryFormCount--;
				}while(queryFormCount>=next);
				queryFormCount = next;
				createButton();
			}else{
				if(but!=null) {
					bar.removeChild(but);
				}					
				if(field==null) {
					setQueryFormHeight(++current);
					createQueryForm('');	
					createSeparator('');
					queryFormCount++;
					createButton();
				}
			}
		});
	}
	
	function createQueryForm(exp) {
		var array = new Array();
		if(exp!=''){
			array = exp.split(":");	
		}
		var bar = document.getElementById("query_bar");
		var div = document.createElement('div');
		div.id = "field_div_"+queryFormCount;
		if(queryFormCount<3) {
			div.setAttribute('style', 'padding-top:3px;');
		}else{
			if(queryFormCount%2!=0)
				div.setAttribute('style', 'margin-left:42px;');
		}
		bar.appendChild(div);
		//使用createElement创建查询字段选择元素
		var select = document.createElement("select");
		select.id = "field_" + queryFormCount;
		div.appendChild(select);
		//select.options.add(new Option("所有", "")); //这个兼容IE与firefox  
		for ( var key in queryFields) {
			select.options.add(new Option(queryFields[key], key));
		}
		if(array.length>0){
			var length = array.length-2;
			var value = "";
			for(var i=0;i<length;i++){
				value = value + array[i];
				if(i!=length-1) value = value + ":";
			}
			$("#field_" + queryFormCount).find("option[value='" + value + "']").attr("selected","selected");
		}
		select.addEventListener('change', function() {
			//var select = document.getElementById("fieldSelect");
			//var queryFormCount = select.selectedIndex; // 选中索引
			//var text = select.options[queryFormCount].text; // 选中文本
			//var value = select.options[queryFormCount].value; // 选中值
			var value = $("#"+this.id).val();
			var num = this.id.split("_");
			var op = document.getElementById("op_"+num[1]);
			while(op.options.length>0){
				op.options.remove(0);
			}
			var map = getOperators();
			if(value.indexOf("String")>-1){					
				var map = getOperatorsForString();
			}
			for ( var i=0;i<map.size();i++) {
				var key = map.getKey(i);
				op.options.add(new Option(map.get(key), key));
			}
		});
		//使用createElement创建查询运算符选择元素
		//div = document.createElement('div');
		//bar.appendChild(div);
		select = document.createElement("select");
		select.id = "op_" + queryFormCount;
		div.appendChild(select);
		var map = getOperatorsForString();
		for ( var i=0;i<map.size();i++) {
			var key = map.getKey(i);
			select.options.add(new Option(map.get(key), key));
		}
		if(array.length>0){
			var value = ':' + array[array.length-2] + ':';
			$("#op_" + queryFormCount).find("option[value='" + value + "']").attr("selected","selected");
		}
		select.addEventListener('change', function() {
			var value = $("#"+this.id).val();
			alert(value);
		});
		//使用createElement创建查询输入框元素
		var input = document.createElement("input");
		input.type="text";  
		input.id="input_"+queryFormCount;
		div.appendChild(input);
		if(array.length>0){
			$("#input_" + queryFormCount).val(array[array.length-1]);
		}
	}
	
	function createQueryExpression(){
		var exp = "";
		if($("#start").val()=='('){
			exp = $("#start").val();
		}
		for(var i=1;i<queryFormCount;i++){
			var value = $("#input_"+i).val();
			if(value=='') continue;
			var field = $("#field_"+i).val();
			var op = $("#op_"+i).val();
			var separator = $("#separator_"+i).val();
			exp += "[" + field + op + value + "]" + separator;
			if(separator.indexOf("#")>-1) break;
		}
		$("#query").val(exp);
	}
	
	function isDelimiter(c) {
		if (("!|&^()#".indexOf(c) != -1))
			return true;
		return false;
	}
	
	function createQueryFormByExpression(expression){
		var i = 0;
		var c = expression.charAt(i);	
		do{
			if(isDelimiter(c)) {
				var s = c;
				c = expression.charAt(++i);
				while (c!='' && isDelimiter(c)) {
					s = s + c;
					c = expression.charAt(++i);
				}
				i--;
				createSeparator(s);
				queryFormCount++;
			}else {
				if(c=='[') {
					// 如果当前字符是一个[，则认为是一个查询量开始标记
					// 将解析器指针往后移，知道遇到另一个]分隔符，之间的字符都是查询量的组成部分
					var exp = "";
					c = expression.charAt(++i);
					while (c!=']') {
						exp = exp + c;
						c = expression.charAt(++i);
					}
					createQueryForm(exp);
				}
			}
			c = expression.charAt(++i);
		}while(i < expression.length);
		createButton();
	}

	/**
	 * 页面初始化
	 */
	$(document).ready(function(){
		var query = $("#query").val();
		if(query!=''){
			createQueryFormByExpression(query);
		}else{
			createQueryForm('');	
			createSeparator('');
			queryFormCount++;
			createButton();
		}
	});
</script>
</head>
<body>
	<form action="${pageContext.request.contextPath}/employee/list?flag=list" 
		name="queryForm" id="_form" method="post" >
		<input type="hidden" id="_method" name="_method"/>
		<input type="hidden" name="nodeId" value="${nodeId}"/>
		<input type="hidden" id="query" name="query" value="${query}"/>
		<input type="hidden" name="page" value="${page}"/>
		<input type="hidden" name="order" value="${order}"/>
		<input type="hidden" name="vQuery" value="${vQuery}"/>
		<!-- 按钮行表单 -->
		<div class="list1_f">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" >
				<tr>
					<td width="5" height="24" id="kjz03"></td>
					<td class="biao1_zhong" valign="middle">
						<table width="100%" border="0" cellspacing="0"
							cellpadding="0">
							<tr>
								<td height="24">
									<jsp:include page="../../ListHead.jsp" flush="true">
										<jsp:param name="delUrl"
											value="${pageContext.request.contextPath }/employee/" />
									</jsp:include>
								</td>
							</tr>
						</table>
					</td>
					<td width="5" height="24" id="kjy03"></td>
				</tr>
			</table>
		</div>
		<!-- 查询条件（默认不显示） -->
		<div id="query_bar" style="display:${vQuery==0?'none':'block'};" class="queryForm_f">
			<div style="padding-top: 3px;">
				<select class="select" name="type" id="start">
					<option value="#" >#</option>
					<option value="(" >(</option>
				</select>
			</div>
		</div>	
		<!-- 标题 -->
		<div id="dataheader" class="list2_f">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 5px">
              <tr class="cur">
                <td width="3%" align="center">
                	<input type='checkbox' onclick="selectReverse('checkOne')" id="ID" value=''/>
                </td>
				<td width="5%" align="left" onclick="orderby('name')">
					<nobr>姓名</nobr>
				</td>
				<td width="5%" align="left" onclick="orderby('sex.name')">
					<nobr>性别</nobr>														
				</td>													
				<td width="5%" align="left" onclick="orderby('nation.name')">
					<nobr>民族</nobr>
				</td>
				<td width="5%" align="left" onclick="orderby('birthday')">
					<nobr>年龄</nobr>
				</td>	
				<td width="5%" align="left" onclick="orderby('educationalBackground.name')">
					<nobr>学历</nobr>
				</td>
				<td width="10%" align="left" onclick="orderby('speciality')">
					<nobr>专业</nobr>
				</td>
				<td width="10%" align="left" onclick="orderby('school')">
					<nobr>毕业学校</nobr>
				</td>	
				<td width="5%" align="left" onclick="orderby('qualification.name')">
					<nobr>职称</nobr>
				</td>
				<td width="5%" align="left" onclick="orderby('duty.name')">
					<nobr>职务</nobr>
				</td>											          
              </tr>
            </table>
		</div>
		<!-- 表体  -->
		<div id="dataList" class="list3_f">
			<c:forEach items="${pageBean.content}" var="item" varStatus="status">
				<table  width="100%" border="0" cellspacing="0" cellpadding="0">
	     			<tr id="tr${status.count}" onclick="rowclick(this)" class="list_table_tr">
						<td width="3%" align="center" height="23">
							<input id="checkOne" name="checkOne" value="${item.id}" 
							type='checkbox' onclick="dataPageCheckChange(this)"/>
						</td>						
						<td width="5%" align="left" title="${item.name}" >
							<nobr>
							<div>																																																		
								<a href="#" onclick="enter('${item.id}');">
									${item.name}
								</a>
							</div>
							</nobr>
						</td>																		
						<td width="5%" align="left" title="${item.sex.name}">
							${item.sex.name}
						</td>										
						<td width="5%" align="left" title="${item.nation.name}">
							${item.nation.name}
						</td>
						<td width="5%" align="left" title="${item.age}">
							${item.age}
						</td>
						<td width="5%" align="left" title="${item.educationalBackground.name}">
							${item.educationalBackground.name}
						</td>
						<td width="10%" align="left" title="${item.speciality}">
							${item.speciality}
						</td>
						<td width="10%" align="left" title="${item.school}">
							${item.school}
						</td>
						<td width="5%" align="left" title="${item.qualification.name}">
							${item.qualification.name}
						</td>
						<td width="5%" align="left" title="${item.duty.name}">
							${item.duty.name}
						</td>
					</tr>
					<tr>
						<td colspan="9">
							<div style="height: 1;" class="biaotiao_xia"></div>
						</td>
					</tr>
				</table>
				
			</c:forEach>
		</div>
		<!-- 页码 --> 
		<div class="list4_f">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr valign="top">
								<td width="4" height="24" id="kj2z03" valign="bottom"></td>
								<td class="biao4_zhong" valign="bottom">
									<table width="100%" border="0" cellspacing="0"
										cellpadding="0">
										<tr>
											<td valign="bottom">
												<table align="right">
													<tr>
														<at:page />
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
								<td width="4" height="24" id="kj2y03" valign="bottom"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>	
	</form>
</body>
</html>
